<template>
  <div class="dashboard-editor-container">
    <panel-group :orderNumStatistic="orderNumStatistic" @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0; margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
    <el-row class="buttonBox"  v-hasPermi="['mes:md:order:list'] || ['mes:pro:schedule']">
      <div class="title">快捷跳转界面</div>
      <div>
        <el-button  type="primary" v-hasPermi="['mes:md:order:list']" @click="jumpPageFn('/order/order')" class="mr-8">业务</el-button>
        <el-button  type="primary" v-hasPermi="['mes:pro:schedule']" @click="jumpPageFn('/mes/pro/proschedule')" class="mr-8">排产</el-button>
        <!-- <el-button  type="primary" v-hasPermi="['mes:md:order:list']" @click="jumpPageFn('')" class="mr-8">汇总</el-button> -->
      </div>

    </el-row>
    <el-row :gutter="32" style="padding:16px 16px 0;margin-bottom:32px;" v-hasPermi="['mes:pro:workorder:list']">
      <el-card>
        <div slot="header" class="clearfix">
          <span>生产进度</span>
        </div>
        <el-table v-loading="loading" :data="workorderList" row-key="workorderId" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column label="工单编码" width="180" prop="workorderCode">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleView(scope.row)" v-hasPermi="['mes:pro:workorder:query']">{{scope.row.workorderCode}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" width="140" align="center" prop="sourceCode" />
          <el-table-column label="客户名称" align="center" prop="clientName" :show-overflow-tooltip="true" />
          <el-table-column label="产品编号" width="120" align="center" prop="productCode" />
          <el-table-column label="产品名称" width="250px" align="center" prop="productName" :show-overflow-tooltip="true" />
          <!-- <el-table-column label="规格型号" align="center" prop="productSpc" :show-overflow-tooltip="true"> -->
          <el-table-column label="单位" align="center" prop="unitOfMeasure" />
          <el-table-column label="生产进度" align="center" width="200px">
            <template slot-scope="scope">
              <el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row.quantityProduced/scope.row.quantity*100"></el-progress>
            </template>
          </el-table-column>
          <el-table-column label="需求日期" align="center" prop="requestDate" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.requestDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>

    <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>-->
  </div>
</template>

<script>
import { listWorkorder } from "@/api/mes/pro/workorder";
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";
import { getOrderNumStatistic, getOrderLineData } from "@/api/mes/index/index";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
};

export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
  },
  data() {
    return {
      loading: false,
      queryParams: {},
      workorderList: [],
      lineChartData: lineChartData.newVisitis,
      orderNumStatistic: {},
    };
  },
  created() {
    // this.getList();
    this.getOrderNumStatistic();
    this.getOrderLineData("newVisitis");
    console.log(process.env.VUE_APP_BASE_API, "process.env.VUE_APP_BASE_API");
  },
  mounted() {
    this.$nextTick(() => {
      const elTable = this.$el.querySelector(".el-table");
      if (elTable) {
        this.getList();
      }
    });
  },
  methods: {
    jumpPageFn(path){
      this.$router.push({path})
    },
    getList() {
      this.loading = true;
      listWorkorder(this.queryParams).then((response) => {
        this.workorderList = response.rows;
        this.loading = false;
      });
    },
    handleSetLineChartData(type) {
      // this.getOrderLineData(type);
      // this.lineChartData = lineChartData[type]
    },
    getOrderNumStatistic() {
      getOrderNumStatistic().then((response) => {
        this.orderNumStatistic = response.data;
      });
    },
    getOrderLineData(type) {
      getOrderLineData(type).then((response) => {
        let oldXData = ['01', '02', '03', '04', '05', '06', '07','08','09','10','11','12',]
        let oldYData = ['0', '0', '0', '0', '0', '0', '0','0','0','0','0','0',]
        let xData = oldXData
        //  response.data.map((item) => item.dataTime);
        oldXData.forEach((item,index)=>{
          response.data.map((ritem)=>{
            if(item == ritem.dataTime){
              oldYData[index] = ritem.content
            }
          })
        })
        let yData = oldYData;
        console.log(xData, oldYData,'xxxxxxyyyy');

        this.lineChartData = {
          xData: xData,
          yData: yData,
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.mr-8{
  margin-right: 8px;
}
.buttonBox{
  background:#fff;
  display:flex;
  flex-direction: column;
  padding:16px; 
  margin-bottom:32px;
}
.title{
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
}
</style>
